import '@/styles/globals.scss'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
//import { SessionProvider } from 'next-auth/react'

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function MyApp({ dataList1, dataList2, Component, pageProps }: AppPropsWithLayout) {
    const { locale, pathname } = useRouter()
	const getLayout = Component.getLayout || ((page) => page)
    console.log('dataList1', dataList1, 'dataList2', dataList2);
    
    // 多语言
    const pathToLocale = pathname === '/' ? '/index' : pathname?.replace(/(\[|\]|\.\.\.)/g, '');
    const langKey = pathToLocale?.replace(/[\W_]+/g, '');
    const currLang = (() => ({
        messages: {
            ...require(`../src/locales/shared/${locale}.json`),
            ...require(`../src/locales${pathToLocale}/${locale}.json`),
        },
    }))();
    console.log('locale', locale, 'pathname', pathname, 'currLang', currLang);

  	return getLayout(<Component lang={currLang.messages[langKey]} {...pageProps} />)
}


MyApp.getInitialProps = async ({ ctx }) => {
    const res1 = await fetch(`http://localhost:3000/api/queryUserList`)
    const res2 = await fetch(`http://localhost:3000/api/queryOrderList`)
    const content1 = await res1.json();
    const content2 = await res2.json();

    return { 
        dataList1: content1.data || [], 
        dataList2: content2.data || [], 
    }
}

export default MyApp
